<template>
    <el-form class="regiesterWrap" :model="form" label-width="120px">
        <el-form-item label="用户名" placeholder="请输入用户名">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="地区">
            <el-select v-model="form.region" placeholder="请选择地区">
                <el-option label="中国大陆" value="CN" />
                <el-option label="中国香港" value="HK" />
                <el-option label="中国澳门" value="MO" />
                <el-option label="中国台湾" value="TW" />
            </el-select>
        </el-form-item>
        <el-form-item label="爱好">
            <el-checkbox-group v-model="form.hobby">
                <el-checkbox label="唱" value="sing" name="sing" />
                <el-checkbox label="跳" value="dance" name="dance" />
                <el-checkbox label="Rap" value="rap" name="rap" />
                <el-checkbox label="篮球" value="basketball" name="basketball" />
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="form.passWord" type="password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item label="确认密码">
            <el-input v-model="form.passWordConfirm" type="password" placeholder="请再次输入密码" show-password />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onRegister">注册</el-button>
            <el-button @click="onExit">退出</el-button>
        </el-form-item>
    </el-form>
</template>
  
<script setup>
import { reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const form = reactive({
    name: '',
    region: '',
    hobby: [],
    sex: '',
    passWord: '',
    passWordConfirm: '',
})
const onRegister = () => {
    console.log(form)
    let tipsArr = [];
    tipsArr.push(`<p>用户名：${form.name}</p>`);
    tipsArr.push(`<p>地区：${form.region}</p>`);
    tipsArr.push(`<p>爱好：${form.hobby}</p>`);
    tipsArr.push(`<p>性别：${form.sex}</p>`);
    const tipsHtml = tipsArr.toString().replace(/,/g, '')
    ElMessageBox.confirm(
        tipsHtml,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            dangerouslyUseHTMLString: true,
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '注册成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消',
            })
        })
}
const onExit = () => {
    console.log('onExit!')
}
</script>
<style>
.regiesterWrap {
    width: 50%;
    margin: 0 auto;
    padding: 2rem;
}
</style>
